<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    :config="editorConfig"
    @ready="onReady"
  ></ckeditor>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import DecoupledEditor from "@ckeditor/ckeditor5-build-decoupled-document";
import "@ckeditor/ckeditor5-build-classic/build/translations/zh-cn";
import CKEditor from "@ckeditor/ckeditor5-vue";
import { getApp } from "@/utils/cloud";
import UploadAdapter from "@/utils/uploadAdapter";
import { isNull } from "lodash";

@Component({
  name: "MyCkEditorTest",
  components: { ckeditor: CKEditor.component }
})
export default class MyCkEditorTest extends Vue {
  editor = DecoupledEditor;
  editorData = "";
  editorConfig = {
    placeholder: "请输入内容",
    language: "zh-cn"
  };

  onReady(editor: any) {
    editor.ui
      .getEditableElement()
      .parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
      );

    editor.plugins.get("FileRepository").createUploadAdapter = (
      loader: any
    ) => {
      return new UploadAdapter(loader);
    };
  }
}
</script>

<style>
.ck-editor__editable_inline {
  min-height: 500px;
}
</style>
